<template>
  <div class="container">
    <Nav style="z-index:999"></Nav>
    <el-row>
      <el-col :span="8"
        ><h1>{{ masterInfo.name }}</h1>

        <!-- 左边大头照 -->
        <el-avatar shape="circle" :size="300" />
      </el-col>
      <el-col :span="16">
        <div class="grid-content ep-bg-purple-dark" />
        <div class="grid-content ep-bg-purple-dark" />

        <el-row>
          <el-col :span="6">
            <div><span>付费 标准:显示会做的菜中的最低价格</span></div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <div>
              <span>服务 评分: {{ masterInfo.score }}</span>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <div>
              <span>师傅 位置: {{ masterInfo.address }}</span>
            </div>
          </el-col>
        </el-row>

        <el-row
          ><el-col :span="6">
            <div>
              <span>预计费用：{{ totalPrices }}</span>
            </div>
          </el-col></el-row
        >
        <el-row
          ><el-col :span="6">
            <el-button v-on:click="bookingMaster" type="success"
              >预约 上门</el-button
            >
            <el-date-picker
              v-model="bookTime"
              type="date"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd"
              align="right"
              unlink-panels
              placeholder="选择上门时间"
              :picker-options="pickerOptions"
            >
            </el-date-picker>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-row :span="24">
      <hr />
    </el-row>

    <el-row :span="24">
      <!-- ======= -->

      <!-- 展示师傅会做的菜 -->
      <el-col :span="6" v-for="(dish, index) in dishsOfMasterInfo" :key="index">
        <el-avatar shape="square" :size="300"> </el-avatar>
        <div>
          <h4>菜名：{{ dish.name }}</h4>
          <span>价格：{{ dish.prices }}</span>
        </div>

        <div>
          <button v-on:click="btn(false, index)">-</button>
          <el-button :value="dish.num" disabled v-text="dish.num"
            >Primary</el-button
          >

          <button v-on:click="btn(true, index)">+</button>
        </div>
      </el-col>
      <!-- ============= -->
    </el-row>
  </div>
</template>

<style>
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>

<script>
import Nav from "@/components/nav";
import { booking_master } from "../../api/mdy/index";
import { get_dishs_of_master } from "../../api/mdy/index";

import axios from "axios";
import store from "@/store";

import { mapState, mapMutations, mapGetters } from "vuex";
export default {
  components: {
    Nav
  },
  data() {
    return {
      bookTime: "", //预约时间
      masterInfo: {}, //师傅信息
      dishsOfMasterInfo: [], //师傅会做的菜列表
      totalPrices: 0,
      // ================
      bugDishList: [],
      // id: {}
      params: {
        datas: [],
        date: ""
      }

      // =========
    };
  },
  watch: {},
  mounted() {
    this.masterInfo = this.$route.query.master;
    this.getDishsOfMaster(this.masterInfo.mid);
    this.pricesOfTotal();
  },
  computed: {
    // 监控数据的获取
    ...mapGetters(["id"]) //监控到的"username", "id", "phone"可以当做该页面的数据（和data里相同）
  },
  methods: {
    pickerOptions() {},
    bookingMaster() {
      console.info("bookTime: " + this.bookTime);
      let dishIds = [];
      this.dishsOfMasterInfo.forEach((item, index) => {
        if (item.num > 0) {
          console.info("item: " + item.cid);
          dishIds.push(item.cid);
        }
      });

      dishIds.push(this.masterInfo.mid); // 最后两个是用户id以及师傅id

      // 这里获取用户id
      dishIds.push(this.id);
      this.params.datas = dishIds;
      this.params.date = this.bookTime.toString();
      console.info("this.params.datas" + this.params.datas);
      console.info("this.params.date" + this.params.date);
      booking_master(this.params)
        .then(res => {
          alert("预约成功!");
        })
        .catch(res => {
          console.info("booking_master...err");
        });
    },

    pricesOfTotal() {
      let price = 0;

      this.dishsOfMasterInfo.forEach((item, index) => {
        price += item.num * item.prices;
      });
      this.totalPrices = price.toFixed(2); //toFixed(2)保留两位小数
    },
    //选框的状态变化
    btn(bool, index) {
      let dishIndex = this.dishsOfMasterInfo[index];

      if (bool) {
        //里面这个判断限制只能买一个
        if (dishIndex.num >= 1) {
          alert("数量最大为1");
          return;
        }
        dishIndex.num++;
      } else {
        if (dishIndex.num <= 0) return;
        dishIndex.num--;
      }
      this.pricesOfTotal();
    },
    //获取师傅会做的菜
    getDishsOfMaster(mid) {
      get_dishs_of_master(mid)
        .then(res => {
          this.dishsOfMasterInfo = res;
          console.info("dishsOfMasterInfo: " + this.dishsOfMasterInfo);
        })
        .catch();
    }
  }
};
</script>
